<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>IFE ECMAScript</title>
</head>

<body>
    <div id="wrapper">
        <div id="news-top" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li>
                        <span>HTML</span>
                        <a href="">Some Link1</a>
                    </li>
                    <li>
                        <span>JS</span>
                        <a class="active" href="">Some Link2</a>
                    </li>
                    <li>
                        <span>CSS</span>
                        <a href="">Some Link3</a>
                    </li>
                    <li>
                        <span>JS</span>
                        <a href="">Some Link4</a>
                    </li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>
        <div id="news-normal" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li>
                        <span>HTML</span>
                        <a href="">Some Link1</a>
                    </li>
                    <li>
                        <span>HTML</span>
                        <a href="">Some Link2</a>
                    </li>
                    <li>
                        <span>JS</span>
                        <a class="active" href="#">Some Link3</a>
                    </li>
                    <li>
                        <span>CSS</span>
                        <a href="">Some Link4</a>
                    </li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>
    </div>
    <script>

        function getAllListItem() {
            // 返回页面中所有li标签

            console.log(document.getElementsByTagName("li"));
        }

        function findAllHtmlSpanInOneSection(sectionId) {
            // 返回某个section下,所有span中内容为HTML的span标签


            var spanlist = document.getElementById(sectionId).getElementsByTagName("span");
            for (var i = 0; i < spanlist.length; i++) {
                if (spanlist[i].innerHTML == "HTML") {
                    console.log(spanlist[i]);
                }
            }
        }





        function findListItem(sectionId, spanCont) {
            // 返回某个section下，所有所包含span内容为spanCont的LI标签

            var section = document.getElementById(sectionId).getElementsByTagName('span');
            for (var i = 0; i < section.length; i++) {
                if (section[i].textContent === spanCont) {
                    console.log(section[i].parentNode);
                }
            }
        }


        function getActiveLinkContent(sectionId) {
            // 返回某个section下，class为active的链接中包含的文字内容
            var section = document.getElementById(sectionId).getElementsByClassName('active');
            for (var i = 0; i < section.length; i++) {
                console.log(section[i].innerHTML);
            }


        }

        getAllListItem();

        findAllHtmlSpanInOneSection('news-top');

        findListItem('news-normal', 'JS');

        getActiveLinkContent('news-top');
    </script>
</body>

</html>